<template>
  <div class="app-container">
    <div class="button-area">
      <el-button type="primary" @click="dialogFormVisible = true"
        >领用申请</el-button
      >
      <!-- <el-button type="primary" @click="dialogFormVisible = true"
        >领用出库</el-button
      > -->
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="review" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.review ? scope.row.review === 1 ? '拒绝' : '通过' : '正在审核'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="buyTime" label="领用人"> </el-table-column>
      <el-table-column prop="num" label="领用数量"> </el-table-column>
      <el-table-column prop="createTime" label="领用时间"> </el-table-column>
      <el-table-column prop="" label="出库数量">
        <template slot-scope="scope">
          <span>{{ scope.row.num - scope.row.lessNum }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sku" label="规格"> </el-table-column>
      <el-table-column prop="action" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row, 'review')"
            type="text"
            size="small"
            v-if="!scope.row.review"
            >审核</el-button
          >
          <el-button
            @click="handleClick(scope.row, 'outbound')"
            type="text"
            size="small"
            v-if="scope.row.review === 2"
            >领用出库</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="pagesize"
        :current-page="page"
      >
      </el-pagination>
    </div>
    <el-dialog title="领用申请" :visible.sync="dialogFormVisible" width="80%">
      <el-form :model="form" :rules="rules" ref="form" :inline="true">
        <el-row>
          <el-col :span="24">
            <el-form-item label="申请类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="item in types"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button type="primary" @click="dialogAddProductFormVisible = true"
        >添加试剂</el-button
      >
      <el-table :data="selectProductData" style="width: 100%;margin-top: 20px">
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="typeName" label="类型"> </el-table-column>
        <el-table-column prop="aliasName" label="品牌"> </el-table-column>
        <el-table-column prop="num" label="领用数量">
          <template slot-scope="scope">
            <div class="input-box" v-if="scope.row.seen">
              <el-input
                size="small"
                @blur="loseFcous(scope.$index, scope.row)"
                v-model="scope.row.num"
              ></el-input>
            </div>
            <span v-else @click="getFcous(scope.$index, scope.row)">{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sku" label="规格"> </el-table-column>
        <el-table-column prop="unitName" label="单位"> </el-table-column>
        <el-table-column prop="action" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="deleteProduct(scope.$index)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
      <el-dialog
        width="30%"
        title="添加试剂"
        :visible.sync="dialogAddProductFormVisible"
        append-to-body
      >
        <el-form
          :model="productForm"
          :rules="productRules"
          ref="productForm"
          :inline="true"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="试剂" required prop="productIndex">
                <el-select
                  v-model="productForm.productIndex"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in products"
                    :key="item.id"
                    :label="item.name"
                    :value="index"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="数量" prop="num" required>
                <el-input
                  v-model="productForm.num"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddProductFormVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="submitProductForm('productForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-dialog>
    <el-dialog title="审核" :visible.sync="dialogReviewFormVisible" width="80%">
      <el-form
        :model="reviewForm"
        :rules="rules"
        ref="reviewForm"
        :inline="true"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="审核意见" required prop="review">
              <el-radio v-model="reviewForm.review" :label="2">同意</el-radio>
              <el-radio v-model="reviewForm.review" :label="1">不同意</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="审核备注" prop="refuseReason">
              <el-input
                v-model="reviewForm.refuseReason"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogReviewFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitReviewForm('reviewForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="领用出库"
      :visible.sync="dialogOutboundFormVisible"
      width="80%"
    >
      <el-table :data="selectOutboundProductData" style="width: 100%">
        <el-table-column prop="name" label="领用商品"></el-table-column>
        <el-table-column prop="num" label="领用数量"></el-table-column>
        <el-table-column
          prop="outboundNum"
          label="本次出库数量"
        >
          <template slot-scope="scope">
            <div class="input-box" v-if="scope.row.seen">
              <el-input
                size="small"
                @blur="loseFcous(scope.$index, scope.row)"
                v-model="scope.row.outboundNum"
              ></el-input>
            </div>
            <div v-else @click="getFcous(scope.$index, scope.row)" style="height: 44px">{{ scope.row.outboundNum }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="action" label="操作">
          <template slot-scope="scope">
            <el-button @click="editNum(scope.row)" type="text" size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogOutboundFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="outbound">出 库</el-button>
      </div>
    </el-dialog>
    <el-dialog
      width="30%"
      title="修改入库数量"
      :visible.sync="dialogAddOutboundNumFormVisible"
      append-to-body
    >
      <el-form
        :model="outboundForm"
        :rules="outboundRules"
        ref="outboundForm"
        :inline="true"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="数量" prop="num" required>
              <el-input
                v-model="outboundForm.num"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddOutboundNumFormVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitOutboundForm('outboundForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listReagentReceive, newReagentReceive } from '@/api/reagent/receive'
import { newReagentStockOut } from '@/api/reagent/stock'
import { listReagent } from '@/api/reagent/product'
import { reviewReagent } from '@/api/reagent/review'

export default {
  name: 'Receive',
  data() {
    return {
      tableData: [],
      selectProductData: [],
      selectOutboundProductData: [],
      dialogFormVisible: false,
      dialogReviewFormVisible: false,
      dialogAddProductFormVisible: false,
      dialogOutboundFormVisible: false,
      dialogAddOutboundNumFormVisible: false,
      form: {
        type: '',
      },
      productForm: {
        productIndex: '',
        num: 0,
      },
      outboundForm: {
        num: '',
      },
      outboundRules: {
        num: [
          { required: true, message: '请输入本次出库数量', trigger: 'blur' },
        ],
      },
      reviewForm: {
        review: 1,
        refuseReason: '',
        type: 3,
      },
      types: [
        {
          id: '1',
          name: '科室申请',
        },
        {
          id: '2',
          name: '个人申请',
        },
      ],
      rules: {
        buyPhone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
        ],
      },
      productRules: {},
      editId: '',
      total: 0,
      page: 1,
      pagesize: 10,
      products: [],
      reviewId: '',
      receiveId: '',
      editIndex: '',
    }
  },
  created() {
    this.getReagentReceive()
    this.getReagent()
  },
  methods: {
    loseFcous(index, row) {
      row.seen = false
    },
    getFcous(index, row) {
      row.seen = true
    },
    getReagent() {
      const self = this
      listReagent().then((response) => {
        if (response && response.rows) {
          self.products = response.rows
        }
      })
    },
    getReagentReceive() {
      const self = this
      listReagentReceive({ pageNum: self.page, pageSize: self.pagesize }).then(
        (response) => {
          if (response && response.rows) {
            self.tableData = response.rows
            self.total = response.total
          }
        },
      )
    },
    handleClick(row, type) {
      const self = this
      if (type === 'review') {
        self.dialogReviewFormVisible = true
        self.reviewId = row.receiveId
      } else if (type === 'outbound') {
        self.dialogOutboundFormVisible = true
        self.receiveId = row.receiveId
        self.selectOutboundProductData = [{...row, seen: false}]
      }
    },
    editNum(row) {
      const self = this
      if (self.selectOutboundProductData.length > 0) {
        self.dialogAddOutboundNumFormVisible = true
        self.selectOutboundProductData.map((item, index) => {
          if (item.id === row.id) {
            self.editIndex = index
          }
        })
      }
    },
    submitProductForm(formName) {
      const self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          const productValue = {
            ...self.products[self.productForm.productIndex],
            num: self.productForm.num,
            seen: false,
          }
          self.selectProductData.push(productValue)
          self.dialogAddProductFormVisible = false
        }
      })
    },
    submitForm(formName) {
      const self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          const sendValue = {
            ...self.form,
            products: self.selectProductData.map((item) => ({
              productId: item.id,
              num: item.num,
            })),
          }
          newReagentReceive(sendValue).then((response) => {
            if (response && response.code === 200) {
              self.dialogFormVisible = false
              self.$message({
                message: '操作成功',
                type: 'success',
              })
              self.getReagentReceive()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    deleteProduct(index) {
      const self = this
      self.selectProductData.splice(index, 1)
    },
    submitReviewForm(formName) {
      const self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          const reviewValue = {
            ...self.reviewForm,
            refIds: [self.reviewId],
          }
          reviewReagent(reviewValue).then((response) => {
            if (response && response.code === 200) {
              self.$message({
                message: '操作成功',
                type: 'success',
              })
              self.getReagentReceive()
              self.dialogReviewFormVisible = false
            }
          })
        }
      })
    },
    outbound() {
      const self = this
      if (self.selectOutboundProductData.length > 0) {
        let flag = true
        for (let item of self.selectOutboundProductData) {
          if (!item.outboundNum) {
            flag = false
            self.$message.error('请输入本次出库数量')
            break
          }
        }
        if (flag) {
          const outboundValue = {
            receiveId: self.receiveId,
            products: self.selectOutboundProductData.map((item) => {
              return {
                productId: item.id,
                num: item.outboundNum,
              }
            }),
          }
          newReagentStockOut(outboundValue).then((response) => {
            if (response && response.code === 200) {
              self.$message({
                message: '出库成功',
                type: 'success',
              })
              self.getReagentReceive()
              self.dialogOutboundFormVisible = false
            }
          })
        }
      }
    },
  },
}
</script>

<style></style>
